<template>
  <div>
   <button @click="addNum">添加</button>
   <button @click="deleteNum">删除</button>
   <button @click="shuffNum">数字洗牌</button>
   <transition-group name="why" tag="div"
   :key="div">
       <span
       v-for="(item ,index) in nums"
      :key="item + index"
      class="item">
       {{item}}
       </span>
   </transition-group>
  </div>
</template>
<script>
import _ from 'loadsh'
export default {
  data () {
    return {
      nums: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      numsCount: 10
    }
  },
  methods: {
    addNum () {
      // this.nums.push(this.numsCount++)
      this.nums.splice(this.randIndex(), 0, this.numsCount++)
    },
    deleteNum () {
      this.nums.splice(this.randIndex(), 1)
    },
    randIndex () {
      return Math.floor(Math.random() * (this.nums.length))
    },
    shuffNum () {
      this.nums = _.shuffle(this.nums)
    }
  }
}
</script>
<style scoped>
.item {
  margin-right: 10px;
  display: inline-block;
}
/* .ul_list {
  margin-top: 10px; */
  /* display: inline-block; */
/* } */
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.why-enter-active,
.why-leave-active {
  transition: all 1s ease;
}
.why-leave-active {
  position: absolute;
}
.why-move {
  transition: transform 1s ease;
}
</style>
